<form nz-form [formGroup]="formModel" (ngSubmit)="submitForm()">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商"
                     (ngModelChange)="gainUserId($event)">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}"
                       nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">场地</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择场地">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择场地" formControlName="merchantStoreId">
            <nz-option nzLabel="不限" nzValue="-1"></nz-option>
            <nz-option *ngFor="let item of merchantStoreList" [nzLabel]="item.storeName" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">商品名称/条形码</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入商品名称/条形码">
          <input type="text" id="name" nz-input formControlName="keyword" placeholder="请输入商品名称/条形码"/>
        </nz-form-control>
      </nz-form-item>
    </div>

<!--    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">-->
<!--      <nz-form-item>-->
<!--        <nz-form-label [nzSpan]="8">开始时间</nz-form-label>-->
<!--        <nz-form-control >-->
<!--          <app-my-date-picker [dateTimeType]="startDateTimeType" [date]="startDateTime" (event)="outDateTime($event)"></app-my-date-picker>-->
<!--        </nz-form-control>-->
<!--      </nz-form-item>-->
<!--    </div>-->

<!--    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">-->
<!--      <nz-form-item>-->
<!--        <nz-form-label [nzSpan]="8">结束时间</nz-form-label>-->
<!--        <nz-form-control [nzSpan]="16">-->
<!--          <app-my-date-picker [dateTimeType]="endDateTimeType" [date]="endDateTime" (event)="outDateTime($event)"></app-my-date-picker>-->
<!--        </nz-form-control>-->
<!--      </nz-form-item>-->
<!--    </div>-->

    <div class="item" nz-col nzXs="24" nzSm="12" nzMd="7" nzLg="7" nzXl="3" class="margin-bottom"
         [ngClass]="isMobile? '': 'padding-left'">
      <button *ngIf="!isMobile" nz-button nzType="primary" class="button_search">
        <i nz-icon nzType="search" nzTheme="outline"></i>查询
      </button>
      <button *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search">
        <i nz-icon nzType="search" nzTheme="outline"></i>查询
      </button>
      <button (click)="exportCsv()" *ngIf="!isMobile" nz-button nzType="primary" style="margin-left: 10px" class="button_search">
        <i nz-icon nzType="to-top" nzTheme="outline"></i>导出
      </button>
      <button (click)="exportCsv()" *ngIf="isMobile" nz-button style="margin-top: 5px"  nzBlock nzType="primary" class="button_search">
        <i nz-icon nzType="to-top" nzTheme="outline"></i>导出
      </button>
    </div>
  </div>
</form>
<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <nz-table #nzTable  [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
    <tr>
      <th>商品</th>
      <th>供应商</th>
      <th>运营商</th>
      <th>安全库存</th>
      <th>库存数</th>
      <th>成本价</th>
      <th>售价</th>
      <th>库存总额</th>
      <th>售价总额</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data">
      <tr>
        <td nzEllipsis>
          <div class="user-info">
            <div class="margin-right"><img class="image" [src]="staticFileUrl + data.fileName" width="50px" height="50px"></div>
            <div style="font-size: 12px">
              <div>
                <span>{{ data.goodsName }}</span>
              </div>
              <div style="display: flex">
                <div class="barcode" style="margin-right: 10px">
                  {{ data.groupName}}
                </div>
                <div class="barcode">
                  {{ data.barCode}}
                </div>
              </div>
            </div>
          </div>
        </td>
        <td nzEllipsis>{{data.fullName}}</td>
        <td nzEllipsis>
          <div>{{data.userName}}</div>
          <div>{{data.name}}</div>
        </td>
        <td nzEllipsis>{{data.safeStock}}</td>
        <td nzEllipsis>{{data.stock}}</td>
        <td nzEllipsis>{{data.costPrice}}</td>
        <td nzEllipsis>{{data.retailPrice}}</td>
        <td nzEllipsis>{{data.totalStockCostPrice}}</td>
        <td nzEllipsis>{{data.totalSalePriceSum}}</td>
      </tr>
    </ng-container>
    </tbody>
  </nz-table>
</div>
